<template>
  <div class="GreetingCardHome">
    <div class="part-bg">
      <img class="part-bg1" :src="homeBg" alt="" />
    </div>
    <div class="part1" :class="inputDoor === 1 ? 'part1-1' : ''">
      <div class="part11">
        <div class="part111" v-if="userinfo.type == 2">
          <input v-model="ddForm.secret" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="number" placeholder="请输入您的工号" />
        </div>
        <div class="part111" v-if="userinfo.type == 3">
          <input v-model="ddForm.secret" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="number" placeholder="请输入您的卡号" />
        </div>
        <div class="part111">
          <input v-model="ddForm.phone" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="number" placeholder="请输入您的手机号" :maxlength="11" />
        </div>
        <div class="part111">
          <input v-model="ddForm.code" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="text" placeholder="请输入短信验证码" :maxlength="4" :disabled="!ddForm.key" />
          <span class="part111-t" @click="getMsgCode">{{ msgCodeTxt }}</span>
        </div>
        <div class="part112" @click="sendBtn">
          <u-loading-icon color="#fff" size="25" v-if="loading1"></u-loading-icon>
          <span class="part112-btn">立即领取</span>
        </div>
      </div>
    </div>
    <div class="part2" v-if="userinfo.rule" @click="popUpMsg(1, userinfo.rule)">
      <span class="part21">活动规则</span>
    </div>

    <popMsg ref="popMsg" @alertOff="alertOff"></popMsg>
  </div>
</template>

<script>
import popMsg from '../../component/dialog/index1.vue'
import $utils from '../../utils'

export default {
  props: {
    demo: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      ddForm: sessionStorage.ddForm ? JSON.parse(sessionStorage.ddForm) : {},
      inputDoor: 0,
      loading1: false,
      msgCodeTxt: '获取验证码',
      getMsgDoor: false,
      homeBg: '',
    }
  },
  components: {
    popMsg,
  },
  mounted() {
    if (this.demo === '1') {
      this.homeBg = this.userinfo?.disable || ''
      this.getCompany()
    } else if (this.demo === '2') {
      this.homeBg = require('./img/bg.png')
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.app.userinfo
    },
  },
  methods: {
    popUpMsg(i, j) {
      this.$refs.popMsg.popUpMsg(i, j)
    },
    alertOff(i) {
      if (i === 6) {
        this.$parent.pageSwichBtn(2)
      }
    },
    sendBtn() {
      if (!this.ddForm.code) {
        uni.showToast({
          icon: 'error',
          title: '请输入验证码',
        })
        return
      }
      if (this.ddForm.code.length !== 4) {
        uni.showToast({
          icon: 'error',
          title: '验证码格式错误',
        })
        return
      }

      if (this.loading1) return
      this.loading1 = true

      this.ddForm.companyId = $utils.urlQuery('companyId') || window.localStorage.companyId
      this.ddForm.openId = localStorage.user
      this.ddForm.secret = this.ddForm.secret || this.ddForm.phone
      this.getMsgDoor = false
      this.$api.drlqApi
        .getActivityMoney(this.ddForm)
        .then((res) => {
          this.loading1 = false
          sessionStorage.ddForm = JSON.stringify(this.ddForm)
          let str = `${res.data.money}元立减金 x${res.data.sum}`
          this.popUpMsg(6, str)
        })
        .catch((err) => {
          this.loading1 = false
          if (err.msg) {
            this.popUpMsg(3, err.msg)
          } else {
            this.popUpMsg(5)
          }
        })
    },
    inputOffset(i) {
      this.inputDoor = i
      this.$bus.$emit('tabBarShow', i)
    },
    sendCode1() {
      let send = {
        phone: this.ddForm.phone,
      }
      if (this.userinfo.type == 1) {
        send.secret = this.ddForm.phone
      } else {
        send.secret = this.ddForm.secret
      }
      this.$api.drlqApi
        .sendCode(send)
        .then((res) => {
          uni.showToast({
            icon: 'success',
            title: '发送成功',
          })
          this.ddForm.key = res.data
        })
        .catch((err) => {
          this.getMsgDoor = false
          if (err.msg) {
            this.popUpMsg(3, err.msg)
          } else {
            this.popUpMsg(5)
          }
        })
    },
    getMsgCode1() {
      if (this.getMsgDoor) return
      this.getMsgDoor = true
      this.sendCode1()
      let num = 60
      let _this = this
      function loop() {
        if (num > 0) {
          num = num - 1
          _this.msgCodeTxt = num + 's'
          setTimeout(() => {
            if (!_this.getMsgDoor) {
              num = 0
            }
            loop()
          }, 1000)
        } else {
          _this.getMsgDoor = false
          _this.msgCodeTxt = '获取验证码'
        }
      }
      loop()
    },
    getMsgCode() {
      if (!this.ddForm.phone) {
        uni.showToast({
          icon: 'error',
          title: '请输入手机号',
        })
        return
      }
      let bb = this.ddForm.phone.match(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/g)
      if (!bb) {
        uni.showToast({
          icon: 'error',
          title: '手机号格式错误',
        })
        return
      }

      let num1 = parseInt(this.userinfo.rewards) || 0

      if (this.userinfo.type == 2) {
        if (!this.ddForm.secret) {
          uni.showToast({
            icon: 'error',
            title: '请输入工号',
          })
          return
        }
        if (this.ddForm.secret && this.ddForm.secret.length > num1) {
          uni.showToast({
            icon: 'error',
            title: '工号长度错误',
          })
          return
        }
      }

      if (this.userinfo.type == 3) {
        if (!this.ddForm.secret) {
          uni.showToast({
            icon: 'error',
            title: '请输入卡号',
          })
          return
        }
        if (this.ddForm.secret && this.ddForm.secret.length > num1) {
          uni.showToast({
            icon: 'error',
            title: '卡号长度错误',
          })
          return
        }
      }

      if ($utils.urlQuery('companyId') || window.localStorage.companyId) {
        this.getMsgCode1()
      }
    },
    getCompany() {
      this.$api.drlqApi
        .getCompany({
          id: $utils.urlQuery('companyId') || window.localStorage.companyId,
        })
        .then((res) => {
          let res1 = res.data
          this.$store.dispatch('app/on_userinfo', res1)
          if (res1.name) {
            document.title = res1.name
          }
          if (res1.dispose.match(/(#|rgb)/g)) {
            document.documentElement.style.setProperty('--main-color', res1.dispose)
          }

          this.homeBg = res1.disable

          let res11 = this.$moment(res1.startTime, 'MM/DD HH:mm:ss')
          let res12 = this.$moment(res1.finishTime, 'MM/DD HH:mm:ss')
          let res21 = parseInt(this.$moment(res1.startTime, 'YYYYMMDDHHmm'))
          let res22 = parseInt(this.$moment(res1.finishTime, 'YYYYMMDDHHmm'))
          let res23 = parseInt(this.$moment(new Date(), 'YYYYMMDDHHmm'))
          if (res23 > res22 || res23 < res21) {
            // 0为上架 1为下架
            if (res1.score == 1) {
              this.popUpMsg(4, {
                // start: res11,
                // end: res12,
                text: '活动已结束，下次赶早哦',
              })
            } else {
              this.popUpMsg(4, {
                // start: res11,
                // end: res12,
                text: '不在活动时间范围内，请稍后再试',
              })
            }
          } else {
            if (res1.score == 1) {
              this.popUpMsg(4, {
                // start: res11,
                // end: res12,
                text: '活动暂未开始，请稍后再试',
              })
            }
          }
        })
        .catch(() => {
          this.$parent.pageLoad(true, '活动不存在')
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCardHome {
  position: relative;
  .part-bg {
    font-size: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    // background: url('./img/a6.png') 0 100% no-repeat;
    // background-size: 100% 468rpx;
    // background-color: #c7000b;
    .part-bg1 {
      width: 100%;
    }
  }
  .part1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s;
    padding-top: 47vh;
    .part11 {
      width: 630rpx;
      margin: 0 auto;
      background: #fff;
      border-radius: 16rpx;
      padding: 40rpx 30rpx 50rpx;
      box-shadow: 0px 0px 30rpx 0px rgba(255, 195, 40, 0.22);
      .part111 {
        display: flex;
        align-items: center;
        border: 2rpx solid rgba(193, 193, 193, 0.3);
        border-radius: 8rpx;
        margin-bottom: 30rpx;
        padding: 0 30rpx;
        .part111-icon {
          margin-right: 30rpx;
        }
        .part111-i {
          flex: 1;
          height: 90rpx;
          line-height: 90rpx;
          font-size: 28rpx;
        }
        .part111-t {
          color: var(--main-color);
          margin-left: 30rpx;
          font-size: 28rpx;
          line-height: 90rpx;
        }
      }
      .part112 {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 50rpx;
        height: 100rpx;
        background: var(--main-color);
        border-radius: 8rpx;
        color: #fff;
        font-size: 34rpx;
        line-height: 34rpx;
      }
      .part112-btn {
        margin-left: 20rpx;
      }
    }
  }
  .part1-1 {
    padding-top: 40vh;
  }
  .part2 {
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 10;
    width: 50rpx;
    height: 162rpx;
    background: var(--main-color);
    border-radius: 12px 0px 0px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    .part21 {
      color: #fff;
      width: 24rpx;
      font-size: 24rpx;
      line-height: 33rpx;
      padding-left: 4rpx;
      display: inline-block;
    }
  }
}
</style>
